<template>
    <div style="width: 100%" v-loading="loading">
        <el-row  :gutter="20" >
            <el-col :span="24" >
                <h3>{{moviename}}</h3>
            </el-col>
            <template v-if="pageList.length>1">
                <el-button-group>
                    <template v-for=" s in pageList   ">
                    <el-button type="primary"    v-on:click.native="openP(s.page)" >

                        {{s.page}}
                    </el-button>
                      </template>
                </el-button-group>
                <img :src="info.pic"/>
            </template>
            <template v-else>
              <el-col :span="24" >
                    <MoviePlayerView :cid="info.list[0].cid"  :pic="info.pic"  :moviename="info.moviename"   v-if="info!=null"  ></MoviePlayerView>
              </el-col>
            </template>
        </el-row>
    </div>
</template>

<script>
    import {movieApi} from '../apis/movie.js';
    import MoviePlayerView from  './MoviePlayerView.vue'
    //视频分P页面
    export default {
        data () {
            return {
                loading :true,
                pageList :[],
                moviename :"",
                info:null
            }
        },
        mounted() {

            movieApi.getMovieView(this.$route.params.aid)
                    .then(function (ret) {


                        this.aid =this.$route.params.aid;
                        this.pageList =ret.list;
                        this.moviename =ret.title;
                        this.info=ret;
                        this.loading=false;
                        //选中视频
                        if(this.$route.params.page && this.$route.params.page>0){

                                this.pageList =[this.$route.params.page]

                        }
                    }.bind(this))
        },
        watch: {
            '$route' (to, from) {
                // 对路由变化作出响应...
                //选中视频
                this.loading =true;
                movieApi.getMovieView(to.params.aid)
                        .then(function (ret) {


                            this.aid =to.params.aid;
                            this.pageList =ret.list;
                            this.moviename =ret.title;
                            this.info=ret;
                            this.loading=false;

                            //选中视频
                            if(to.params.page && to.params.page>0){

                                this.pageList =[to.params.page]

                            }
                        }.bind(this))
            }
        },
        components:{MoviePlayerView},
        methods:{
            //打开P视频
            openP(page){
                this.$router.push("/movie/"+this.aid+"/"+page);
            }
        }
    }

</script>


<style>
</style>